<template>
    <div class="l-from-body" >
        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="96px" >
            <el-form-item label="名称" prop="f_Name">
                <el-input :placeholder="$t('请输入')" v-model="formData.f_Name">
                </el-input>
            </el-form-item>
            <el-form-item label="绑定按钮" prop="f_ModuleBtnId">
                <l-select :options="btnOptions" :placeholder="$t('请选择')" v-model="formData.f_ModuleBtnId" >
                </l-select>
            </el-form-item>
            <el-form-item label="表格ID" prop="f_GridId">
                <el-input :placeholder="$t('请输入')" v-model="formData.f_GridId">
                </el-input>
            </el-form-item>
            <el-form-item label="接口地址" prop="f_Url">
                <el-input :placeholder="$t('请输入')" v-model="formData.f_Url">
                </el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
const apiModule = window.$api.system.module
export default {
    props:{
        moduleId:String
    },
    data(){
        return {
            btnOptions:[],
            formData:{
                f_Name:'',
                f_ModuleBtnId:'',
                f_GridId:'mainTable',
                f_Url:''
            },
            rules: {
                f_Name: [
                    { required: true, message: '请输入名称' }
                ],
                f_ModuleBtnId: [
                    { required: true, message: '请选择按钮' }
                ],
                f_GridId: [
                    { required: true, message: '请输入表格ID' }
                ]
            }
        };
    },
    watch:{
        moduleId:{
            handler(val){
                this.LoadButtons(val)
            },
            immediate: true
        }
    },
    created () {
    },
    methods:{
        async LoadButtons(val){
            const res = await this.$awaitWraper(apiModule.getButtons(val))
            this.btnOptions = res.map(t=>{return {label:t.f_FullName,value:t.f_EnCode}})
        },

        resetForm(){
            this.formData.f_Id = ''
            this.$refs.form && this.$refs.form.resetFields()
        },
                // 校验表单
        validateForm(callback){
            this.$refs.form.validate((valid) => {
                if(valid){
                    callback()
                }
            })
        },
        setForm(data){
            this.formData = this.$deepClone(data)
            
        },
        getForm(){
            const formData = this.$deepClone(this.formData)
            formData.f_ModuleId = this.moduleId
            formData.F_BtnName = this.btnOptions.find(t=>t.value == formData.f_ModuleBtnId).label
            return formData
        }
    }
}
</script>